import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View} from '@tarojs/components'
import './index.less'
import {AtIcon, AtButton} from 'taro-ui'

@connect(({houseDetail, loading}) => ({
  houseDetail,
  loading
}))

export default class InformDetail extends Component {

  config = {
    navigationBarTitleText: '详细信息'
  }

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
  }

  componentDidMount() {
    const {dispatch} = this.props;
    const {goodId,type} = this.$router.params;
    if (goodId) {
      dispatch({
        type: 'houseDetail/loadDetailData',
        payload: {
          goodId,type
        }
      })
    }
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  // 分享小程序
  onShareAppMessage(options) {
    const {houseDetail, dispatch} = this.props;
    const {listData} = houseDetail;
    const updateState = (obj) => {
      dispatch({
        type: 'houseDetail/updateState',
        payload: {
          ...obj
        }
      })
    }
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "江苏厂管家",        // 默认是小程序的名称(可以写slogan等)
      path: `pages/houseDetail/index?id=${listData.id}`,        // 默认是当前页面，必须是以‘/’开头的完整路径
    };
    updateState({isShare: true});
    return shareObj;
  }

  //打电话
  phoneCall(num, e) {
    Taro.makePhoneCall({phoneNumber: num})
    //阻止事件向上级冒泡
    e.stopPropagation();
  }

  // 帮我租赁跳转
  goPage(){
    Taro.navigateTo({
      url: `/pages/rentRelease/index`
    })
  }

  render() {
    const {
      houseDetail, dispatch
    } = this.props;
    const {
      detailData, listData, isShare
    } = houseDetail;

    let bannerList = listData['outerBannerImage'] ? listData['outerBannerImage'].split(';') : []
    let list = listData['floors'] && listData['floors'] instanceof Array ? listData['floors'] : [];
    return (
      <View className='houseDetail'>
        <View className='informDetail'>
          <View className='box'>
            {/* banner图 */}
            <View className='topBox'>
              {
                bannerList && bannerList[0] ?
                <Swiper
                interval={10000}
                className="swiper-container"
                circular
                indicatorDots
                autoplay
                indicatorColor='#FAFAFA'
                indicatorActiveColor='#026179'
                >
                    {
                      bannerList.map((item, index) => (
                        <SwiperItem key={index}>
                          <image src={item} className="swiper-img"/>
                        </SwiperItem>
                      ))
                    }
                  </Swiper>
                  :
                  <Image className="swiper-img bannerDef" mode="widthFix" src="../../images/banner.png"></Image>
                }
            </View>
            {/* 基础信息 */}
            <View className="detail">
              <View className="detailName">{listData['name']}</View>
              <View className='at-row tableBox'>
                <View className='at-col tableName'>租金</View>
                <View className='at-col tableName'>总面积</View>
                <View className='at-col tableName'>地址</View>
              </View>
              <View className='at-row'>
                <View className='at-col tableValue'>{listData.totalPrice != -1 ? listData.totalPrice + '元/月' : '面议'}</View>
                <View className='at-col tableValue'>{listData.totalArea} m²</View>
                <View className='at-col tableValue'>{listData['address']}</View>
              </View>
            </View>
            {/* 基础信息 */}
            <View className='detail'>
              <View className="detailName">基础信息</View>
              <View className='infoBody'>
                {detailData.map((item, i) => <View key={item.name} className='infoChild'>
                  <View className='infoText'>{item.name}</View>
                  <View className='infoValue'>{item.isHas ? (listData[item.code] ? '有' : '无') : (listData[item.code] || '')}</View>
                </View>)}
              </View>
            </View>
            {
              list.map((item, i) => {
                let ary = item.values || [];
                return <View className="detail" key={i + 'floor'}>
                  <View className="detailName">{item.name}栋</View>
                    <View className='at-row tableBox'>
                    <View className='at-col tableName'>楼层</View>
                    <View className='at-col tableName'>面积</View>
                    <View className='at-col tableName'>价格</View>
                    <View className='at-col tableName'>层高</View>
                  </View>
                  {
                    ary.map((child, index) => <View className='at-row' key={index + 'child'}>
                      <View className='at-col tableValue'>{child.floor}F</View>
                      <View className='at-col tableValue'>{child.area}㎡</View>
                      <View className='at-col tableValue'>{child.price}元/月</View>
                      <View className='at-col tableValue'>{child.height}米</View>
                    </View>)
                  }
                </View>
              })
            }
            {/* 详细 */}
            <View className="detail">
              <View className="detailName">详细</View>
              <View className="description">{listData.description}</View>
            </View>
            {/* 帮我选址 */}
            <View className='promote' onClick={this.goPage.bind(this)}>
              <image src={`../../images/detail/promote.png`} mode="widthFix"/>
            </View>
          </View>
          <View className='tabBarBtm'>
              <View className='shareBtn collectBox'>
                <image src={`../../images/detail/collect.png`} mode="widthFix"/>
                <View className='tabBarText'>收藏</View>
              </View>
              <View className='shareBtn'>
                <View className='share'>
                  分享
                </View>
              </View>
              <View className='shareBtn'>
                <View className='call' onClick={this.phoneCall.bind(this, listData['cellphone'] || '13966110110')}>
                  电话联系
                </View>
              </View>
              {/* {isShare == true ?
                <View className='shareBtn'>
                  <AtButton onClick={this.phoneCall.bind(this, listData['cellphone'] || '13966110110')}>
                    <AtIcon value='phone' color='#ff505f' size='18'></AtIcon>
                    <View className='tabBarText'>电话联系</View>
                  </AtButton>
                </View> :
                <View className='shareBtn'>
                  <AtButton>
                    <AtIcon value='phone' color='#ff505f' size='18'></AtIcon>
                    <View className='tabBarText'>分享后显示电话</View>
                  </AtButton>
                </View>} */}
          </View>
        </View>
      </View>
    )
  }
}
